<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="8" :lg="4">
          <p>检录类型</p>
          <el-select v-model="Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.CheckInTypeCode" size="mini" placeholder="请选择" filterable @change="getCheckPeople()">
            <el-option label="全部" value="" />
            <el-option v-for="(item, index) in checkType" :key="index" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>手机号/姓名</p>
          <el-input v-model="Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.NameOrMobile" placeholder="请输入手机号/姓名" size="mini" clearable @change="getCheckPeople()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getCheckPeople()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_mb_15">
      <el-button type="success" size="mini" @click="selectExaminer()">选择本赛事检录人</el-button>
      <el-button type="primary" size="mini" @click="setCheckType()">批量设置检录类型</el-button>
      <el-button type="warning" size="mini" @click="remove()">批量删除</el-button>
    </div>
    <el-table ref="checkTable" v-loading="loading" :data="checkData" size="mini" @selection-change="selectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="mobile" label="账户名" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="checkInTypeCode" label="检录类型">
        <template slot-scope="{row}">
          <span v-for="item in checkType" :key="item.id">
            {{ item.code === row.checkInTypeCode ? item.value: '' }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.Page"
        :page-size="Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <Type ref="type" :selection="selection" />
    <People ref="people" />
  </div>
</template>

<script>
import Type from './checkType';
import People from './selectPeople';
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseList, // 根据当前赛事获取检录人员信息
  api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourse // 删除赛事检录人员
} from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO,
  Api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourseQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'CheckSetting',
  components: {
    Type,
    People
  },
  data() {
    return {
      loading: false,
      totalPage: 0, // 分页总条目数
      Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO: new Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO(),
      Api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourseQO: new Api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourseQO(),
      checkType: [], // 检录类型
      checkData: [], // 表格数据
      selection: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict().then(res => {
      this.checkType = res.checkInType.filter((item) => {
        return item.code !== 'NotSet';
      });
    });
    this.getCheckPeople();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取表格数据
    getCheckPeople(page) {
      var that = this;
      that.loading = true;
      that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.Page = page || 1;
      that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.SkipCount = (that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.Page - 1) * that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.MaxResultCount;
      that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.CompetitionId = this.$route.params.id;
      api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseList(that.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO).then(res => {
        that.checkData = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    // 重置搜索表单
    reset() {
      this.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO = new Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO();
      this.getCheckPeople();
    },
    // 多选
    selectionChange(val) {
      const id = val.map(item => {
        return item.id;
      });
      this.selection = id;
    },
    // 选择本赛事检录人
    selectExaminer() {
      this.$refs.people.open();
    },
    // 批量设置检录类型
    setCheckType() {
      if (this.selection.length > 0) {
        this.$refs.type.open();
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择内容!'
        });
      }
    },
    // 批量删除
    remove() {
      var that = this;
      if (that.selection.length > 0) {
        that.$confirm('您确定要删除所选账户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.loading = true;
          var form = that.Api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourseQO;
          form.CompetitionId = that.$route.params.id;
          form.ClerkOfCourseRepositoryIds = that.selection;
          console.log(form);
          api_DELETE_EventsManagementClerkOfCourseCompetitionClerkOfCourse(form).then(res => {
            that.loading = false;
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
            that.$refs.people.getData();
            that.getCheckPeople();
          }).catch(() => {
            that.loading = false;
            that.$message({
              type: 'error',
              message: '删除失败!'
            });
          });
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else {
        that.$message({
          type: 'warning',
          message: '请先选择内容!'
        });
      }
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_EventsManagementClerkOfCourseCompetitionClerkOfCourseListQO.MaxResultCount = MaxResultCount;
      this.getCheckPeople();
    },
    pageIndexChange(currentPage) {
      this.getCheckPeople(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
